<template>
	<!-- 求职反馈-->
	<view style="position: relative; overflow: inherit">
		<baseHead title="求职反馈" bg="#fff" color="#000000" style="margin-bottom: 78rpx;">
			<template slot="textnr">
				<view style="
            width: 100%;
            background-color: #ffffff;
            position: fixed;
            z-index: 999;
	
          ">
					<view class="tabsclsdds">
						<view v-for="(item, index) in tabs" :key="index" class="diflc" @click="clickTabs(item, index)"
							:class="tab === index ? 'itemtab' : ''">
							{{ item.name }}
							<view :class="tab === index ? 'classview' : ''"></view>
						</view>
					</view>
				</view>
			</template>
		</baseHead>

		<!-- <view class="minhtheigh"></view> -->

		<view class="swiperclass">
			<template v-if="datalist.length > 0">
				<scroll-view scroll-y :style="{'height':windowHeight-50-statusBarH+'px'}" refresher-enabled="true"
					:refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
					refresher-default-style="none" :refresher-threshold="10" :show-scrollbar='false'
					@scrolltolower="ReachBottom" :lower-threshold='50'>
					<u-loading-icon :show="triggered" text="正在刷新" style="padding-top: 10rpx;"></u-loading-icon>
					<view class="job-box" v-for="(item, index) in datalist" :key="index" @click="JobDetails(item)">
						<view class="fl-lr-c">
							<view class="job_name" v-if="item.JobName">{{ item.JobName }}
								<text v-if="item.Negotiable">面议</text>
								<text v-else-if="item.MaxWage<=3000">{{item.MaxWage / 1000}}K以下</text>
								<text v-else>{{ item.MinWage / 1000 }}~{{ item.MaxWage / 1000 }}K</text>
							</view>
							<view class="statedsa">
								{{ item.ResumeInboxState == 0? "待查看"  : item.ResumeInboxState == 1  ? "被查看"
						  : item.ResumeInboxState == 2
						  ? "待沟通"
						  : item.ResumeInboxState == 3
						  ? "邀面试"
						  : item.ResumeInboxState == 4
						  ? "不合适"
						  : ""
							}}
							</view>
						</view>
						<view class="condition fl-w">
							<view>{{ item.Education }}</view>
							<view v-if="item.Graduate">应届生</view>
							<view v-else-if="item.Student">在校生</view>
							<view v-else-if="item.MaxExperience > 10">10年以上经验</view>
							<view v-else-if="item.MaxExperience <= 1">1年以内经验</view>
							<view v-else>{{ item.MinExperience }}~{{ item.MaxExperience }}年经验</view>
							<view>招{{ item.Amount }}人</view>
						</view>
						<view class="treatment">
							<template v-for="(fulitem, index) in listwel(item.Welfares)">
								<view class="isdggsad" :key="index" v-if="fulitem">
									{{ fulitem }}
								</view>
							</template>
						</view>
						<view class="company-bottom fl-lr-c">
							<view class="left-company fl-t">
								<image class="logo" :src="imgStr(item)"></image>
								<view class="stateCla">
									<view :class="
										item.UserOnlineInfo !== null &&
										item.UserOnlineInfo.State == true? 'onlineStateCla': 'noOnlineStateCla'">
									</view>
								</view>
								<view class="company-name">{{ item.CorpName }} </view>
							</view>
							<view class="position_item">
								{{ item.PcaAddress }}
							</view>
						</view>
					</view>
					<u-loadmore :status="status" style="padding-bottom: 40rpx;" />
				</scroll-view>
			</template>

			<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="150">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	export default {
		data() {
			return {
				URL: this.$config.domain.staticUrl,

				tab: 0,
				tabs: [{
						id: "",
						name: "全部",
					},
					{
						id: 0,
						name: "待查看",
					},
					{
						id: "1",
						name: "被查看",
					},
					{
						id: "2",
						name: "待沟通",
					},
					{
						id: "3",
						name: "邀面试",
					},
					{
						id: "4",
						name: "不合适",
					},
				],
				datalist: [],
				status: "loadmore",
				PageIndex: 1,
				PageSize: 10,
				State: "",
				triggered: false,
				statusBarH: '',
				windowHeight: '',
				windowWidth: '',
			};
		},

		onShow() {},
		created() {
			this.listdata();
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.windowWidth = app.globalData.phoneInformation.windowWidth
		},
		//子组件
		components: {
			baseHead,
		},
		methods: {

			ReachBottom() {
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				if (this.status != "nomore") {
					this.status = "loading";
					this.listdata();
				}
			},
			// 下拉刷新
			onRefresh() {
				this.triggered = true;
				setTimeout(() => {
					this.triggered = false;
					let obj = {
						PageIndex: 1,
						PageSize: 10,
						State: this.State,
					};
					this.listdata();

				}, 2000)
			},
			// 下拉复位
			onRestore() {
				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			listwel(item) {
				let arr = [];
				arr = JSON.parse(item);
				if (arr) {
					return arr.map((res, index) => {
						if (index < 4) {
							return res;
						}
					});
				}
			},

			listdata() {
				console.log(33);
				let obj = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					State: this.State,
				};
				this.$http.huirc.inboxfeedback(obj).then((res) => {
					if (res.Result) {
						console.log(res.Result);
						if (res.Result.Items.length == 0) {
							// 没有数据----
							this.status = "nomore";
							return;
						}
						this.datalist = this.datalist.concat(res.Result.Items);

						console.log(res.Result.Items.length, this.PageSize);
						if (res.Result.Items.length >= this.PageSize) {
							this.PageIndex++;
							// 表示还有数据
						} else {
							//没有更多数据了
							this.status = "nomore";
						}
					}
				});
			},
			clickTabs(item, index) {
				if (this.tab === index) return;
				this.tab = index;
				this.State = item.id;

				this.datalist = [];
				this.PageIndex = 1;
				this.status = "loadmore";
				this.listdata();
			},
			JobDetails(item) {
				console.log(item);
				let id = item.JobId;
				uni.navigateTo({
					url: `/pages/views/packageA/type-jobhunting/search/JobDetails?id=` + id,
				});
			},

			swiperChange(e) {
				console.log("-------------");

				let eindex = e.detail.current;
				console.log(eindex);
				this.tab = eindex;

				this.tabs.forEach((res, index) => {
					if (index == eindex) {
						this.State = res.id;
					}
				});

				this.datalist = [];

				this.PageIndex = 1;
				this.status = "loadmore";
				this.listdata();
			},
			imgStr(item) {
				if (item.LogoPath) {
					return this.URL + item.LogoPath;
				} else {
					return "/static/assets/images/default-corp-logo.png";
				}
			},
		},
	};
</script>


<style lang="scss" scoped>
	.tabsclsdds {
		height: 78rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		padding: 0 30rpx;
		box-sizing: border-box;

		.diflc {
			font-size: 28rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}

	.itemtab {
		color: #268af1;
		position: relative;
		padding: 5rpx;
		box-sizing: border-box;

		.classview {
			width: 52rpx;
			height: 5rpx;
			background: #268af1;
			position: absolute;
			left: 50%;
			bottom: -10rpx;
			transform: translate(-50%, 0);
		}
	}

	.minhtheigh {
		height: 78rpx;
	}

	.swiperclass {
		// height: calc(100vh - 78rpx - var(--status-bar-height) - 88rpx);

		box-sizing: border-box;

		.job-box {
			margin: 20rpx 20rpx;
			padding: 24rpx 26rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.job_name {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;

				text {
					font-size: 34rpx;
					font-family: DIN-Regular, DIN;
					font-weight: 400;
					color: #f35370;
					padding-left: 30rpx;
				}
			}

			.statedsa {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.condition {
				padding: 22rpx 0 22rpx;

				view {
					font-size: 26rpx;
					font-weight: 500;
					color: #313131;
					margin-right: 50rpx;
				}
			}

			.treatment {
				display: flex;
				justify-content: flex-start;
				flex-wrap: nowrap;

				.isdggsad {
					background: #f7f7f7;
					border-radius: 8rpx;
					padding: 8rpx 20rpx;
					margin: 0 20rpx 14rpx 0;
					font-size: 26rpx;
					color: #666666;
				}
			}

			.company-bottom {
				display: flex;
				align-items: center;
				height: 60rpx;
				overflow: hidden;

				.left-company {
					width: auto;
					height: auto;
					flex: 1;
					display: flex;
					justify-content: flex-start;
					position: relative;

					.logo {
						flex-shrink: 0;
						width: 42rpx;
						height: 42rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						opacity: 1;
						border: 1rpx solid rgba(112, 112, 112, 0.2);
					}

					.stateCla {
						position: absolute;
						left: 38rpx;
						top: 38rpx;

						.onlineStateCla {
							width: 12rpx;
							height: 12rpx;
							background-color: #14c88b;
							border-radius: 100%;
							float: right;
						}

						.noOnlineStateCla {
							width: 12rpx;
							height: 12rpx;
							background-color: #b2b6bf;
							border-radius: 100%;
							float: right;
						}
					}

					.company-name {
						flex: 1;
						margin-left: 20rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #999999;
						width: auto;
					}
				}

				.position_item {
					// width: 120rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
					text-align: center;
				}
			}
		}
	}
</style>